<!--
 * @Author: your name
 * @Date: 2021-09-17 14:23:08
 * @LastEditTime: 2021-11-10 15:59:46
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \calendar\src\App.vue
-->
<!--
 *                        _oo0oo_
 *                       o8888888o
 *                       88" . "88
 *                       (| -_- |)
 *                       0\  =  /0
 *                     ___/`---'\___
 *                   .' \\|     |// '.
 *                  / \\|||  :  |||// \
 *                 / _||||| -:- |||||- \
 *                |   | \\\  - /// |   |
 *                | \_|  ''\---/''  |_/ |
 *                \  .-\__  '-'  ___/-. /
 *              ___'. .'  /--.--\  `. .'___
 *           ."" '<  `.___\_<|>_/___.' >' "".
 *          | | :  `- \`.;`\ _ /`;.`/ - ` : | |
 *          \  \ `_.   \_ __\ /__ _/   .-` /  /
 *      =====`-.____`.___ \_____/___.-`___.-'=====
 *                        `=---='
 * 
 * 
 *      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * 
 *            佛祖保佑       永不宕机     永无BUG
 -->
<script setup>
import calendar from "./components/calendar.vue";
import { reactive } from "vue";
/* 8
    month: 9,
    activity: [
      {
        day: 17,
        list: [
          { txt: "巴拉巴拉", id: 0 },
          { txt: "巴拉巴拉", id: 1 },
        ],
      },
      {
        day: 18,
        list: [
          { txt: "巴拉巴拉", id: 2 },
          { txt: "巴拉巴拉", id: 3 },
        ],
      },
    ],
*/ 
const activity = reactive([
  {
    year: 2021,
    months: [
      {
        month: 11,
        activity: [
          { 
            day: 17,
            list: [
              { txt: "世界很美好", id: 0 },
              { txt: "感谢有你", id: 1 },
              { txt: "感谢有你", id: 1 },
              { txt: "感谢有你", id: 1 },
              { txt: "感谢有你", id: 1 },
              { txt: "感谢有你", id: 1 },
              { txt: "感谢有你", id: 1 },
              { txt: "感谢有你", id: 1 },
              { txt: "感谢有你", id: 1 },
              { txt: "感谢有你", id: 1 },
              { txt: "感谢有你", id: 1 },
              { txt: "感谢有你", id: 1 },
            ] 
          },
          {
            day:18,
            list:[
              { txt: "世界很美好", id: 0 },
              { txt: "感谢有你", id: 1 },
            ]
          }
        ],
      },
      {
        month:12,
        activity: [
          { 
            day: 17,
            list: [
              { txt: "世界很美好", id: 0 },
              { txt: "感谢有你", id: 1 },
            ] 
          },
          {
            day:18,
            list:[
              { txt: "世界很美好", id: 0 },
              { txt: "感谢有你", id: 1 },
            ]
          }
        ],
      }
    ],
  },
  
  {
    year:2022,
    months:[
       {
        month: 7,
        activity: [
          { 
            day: 17,
            list: [
              { txt: "世界很美好", id: 0 },
              { txt: "感谢有你", id: 1 },
            ] 
          },
          {
            day:18,
            list:[
              { txt: "世界很美好", id: 0 },
              { txt: "感谢有你", id: 1 },
            ]
          }
        ],
      },
    ]
  }
]);


const fun = (e) => {
  console.log(e);
};
const fun2 = (e) => {
  console.log(e);
};
</script>
  
<template>
  <div class="test">
    <calendar
      @handleParams="fun"
      @handleActivityParams="fun2"
      :activity="activity"
    ></calendar>
  </div>
</template>

<style>
.test {
  width: 400px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
